<template>
    <div>
        <Modal
            v-model="isVisible"
            :mask-closable="false"
            title="装修密码管理"
            class-name="vertical-center-modal"
            @on-visible-change="onVisibleChange">

            <div class="tip">
                <!-- 此后绑定的有网关门锁，该密码均自动生效<br> -->
                注：为保障公寓安全，请谨慎使用装修密码，装修结束后及时删除。
            </div>

            <Form ref="form1" :model="formItem" style="padding-right:10px" :rules="formRules" :label-width="110" :show-message="false">
        
                <FormItem label="设置密码" prop="pwd" class="form-item">
                    <!-- <InputNumber v-model="formItem.pwd" type="password" placeholder="设置6位装修密码" /> -->
                    <Input v-model="formItem.pwd"  placeholder="设置6位数字装修密码" :maxlength="6" clearable style="width: 166px" @on-keyup="onPwdKeyup"/>
                </FormItem>

                <FormItem label="密码有效期">
                    <Row>
                        <Col span="11">
                            <FormItem prop="startTime" class="form-item">
                                <DatePicker type="datetime" v-model="formItem.startTime" format="yyyy-MM-dd HH:mm" placeholder="开始时间" style="width: 100%" :options="timeOption" @on-ok="selectStartTime"></DatePicker>
                            </FormItem>
                        </Col>
                        <Col span="2" style="text-align: center">-</Col>
                        <Col span="11">
                            <FormItem prop="endTime" class="form-item">
                                <DatePicker type="datetime" v-model="formItem.endTime" format="yyyy-MM-dd HH:mm" placeholder="结束时间" style="width: 100%" :options="timeOption"></DatePicker>
                            </FormItem>
                        </Col>
                    </Row>
                </FormItem>
                
            </Form>

            <div slot="footer">
                <Button type="ghost" size="large" @click="delPwd">删除</Button>
                <Button type="primary" size="large" @click="sendPwd('form1')">保存</Button>
            </div>

        </Modal>

    </div>
</template>

<script>
import dayjs from 'dayjs'
// import util from '@/libs/util';
import { http, api } from '@/libs/http'

export default {
  name: 'decoratePwd',
  props: {
    home: Object,
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      formItem: {
        pwd: '',
        startTime: '',
        endTime: ''
      },
      formRules: {
        pwd: [{ required: true, message: '不能为空', trigger: 'blur' }],
        startTime: [{ required: true, type: 'date', message: '不能为空', trigger: 'blur' }],
        endTime: [{ required: true, type: 'date', message: '不能为空', trigger: 'blur' }]
      }
    }
  },

  computed: {
    isVisible: {
      get: function () {
        return this.visible
      },

      set: function (val) {
        this.$emit('on-close', val)
      }
    },

    timeOption () {
      return {
        disabledDate (date) {
          // return date && date.valueOf() < dayjs(dayjs().format('YYYY-MM-DD')).valueOf()
          return date && date.valueOf() < Date.now() - 86400000
        }
      }
    }

    // endTimeOptions() {
    //     let self = this
    //     return {
    //         disabledDate(date) {
    //             return (
    //                 date &&
    //                 (date.valueOf() < dayjs(dayjs(self.formItem.startTime).format('YYYY-MM-DD')).valueOf() ||
    //                     date.valueOf() >
    //                         dayjs()
    //                             .add(12, 'months')
    //                             .valueOf())
    //             )
    //         }
    //     }
    // }
  },

  methods: {
    selectStartTime (e) {
      let formItem = this.formItem
      if (formItem.endTime <= formItem.startTime) {
        formItem.endTime = ''
      }
    },

    resetForm (name) {
      this.$refs[name].resetFields()
    },

    onVisibleChange (v) {
      if (!v) {
        this.formItem.endTime = ''
        this.resetForm('form1')
      } else {
        const homeId = this.home.id
        if (homeId) {
          http.request(this, api.home_info, [homeId], null, (res, err) => {
            if (err || !res) {
              return
            }
            this.formItem.pwd = res.decorate_password.password || ''
            this.formItem.startTime = res.decorate_password.start_time ? new Date(res.decorate_password.start_time) : new Date()
            this.formItem.endTime = res.decorate_password.end_time ? new Date(res.decorate_password.end_time) : ''
          })
        }
      }
    },

    hideModal () {
      this.isVisible = false
    },

    onPwdKeyup (e) {
      this.formItem.pwd = this.formItem.pwd.replace(/[^\d]/g, '')
    },

    sendPwd (name) {
      this.$refs[name].validate(valid => {
        if (!valid) {
          return
        }

        let formItem = this.formItem
        let startTime = dayjs(formItem.startTime).valueOf()
        let endTime = dayjs(formItem.endTime).valueOf()
        let params = {
          password: formItem.pwd,
          start_time: startTime,
          end_time: endTime
        }

        if (endTime - startTime < 5 * 60 * 1000) {
          this.$Message.error('时间过短')
          return
        }

        http.request(this, api.password_decorate_update, [this.home.id], params, (res, err) => {
          if (err || !res) {
            return
          }
          this.$Message.success('放发成功')
          this.isVisible = false
        })
      })
    },
    delPwd () {
      http.request(this, api.password_decorate_del, [this.home.id], null, (res, err) => {
        if (err || !res) {
          return
        }
        this.$Message.success('删除成功')
        this.isVisible = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
.tip {
    text-align: left;
    padding: 10px 0 18px 24px;
}
.form-item {
    margin-bottom: 18px;
}
</style>